import { Avatar, Tag } from 'antd'
import React, { FC, useEffect, useState } from 'react'
import { useLocation, useNavigate, useParams, } from 'react-router-dom'
import { ajax } from '../../../api'
import { baseURL } from '../../../api/request'
import Myhead from '../../../components/myhead'
import { vipList } from '../../../utils'
import { Empty, List, Tabs } from 'antd-mobile'
import './advise.scss'
import './index.scss'
import {
  DingtalkOutlined
} from '@ant-design/icons';
import {inject,observer} from 'mobx-react'
import moment from 'moment'
const  UserDetailed:FC<any>=({
  anno,
  advise
})=> {
    const {filtergetAnnoList,filterannoList}=anno
    const {filtergetAdviseList,filteradviseList}=advise
    const [obj,setObj] = useState<any>(null)
    const params = useParams()
    const navigate = useNavigate()
    const [keys,setKeys]=useState('1')
     //获取用户信息，
     useEffect(()=>{
        ajax.getuser({
            _id:params.aid 
        })
        .then(res=>{
            if(res.code==200){
                setObj(res.result)
            }
        })
        
        filtergetAnnoList(params.aid)
        filtergetAdviseList(params.aid)
    },[])
      //点击查看，携带——id进入详情页
      const gotoDetailed=(item:any)=>{
      navigate('/detailed/annoDetailed/'+item._id)
      }
       //点击查看，携带——id进入详情页
       const gotoDetailed_advise=(item:any)=>{
        navigate('/detailed/adviseDetailed/'+item._id)
        }
        //切换tabs
        const changeKey=(key:any)=>{
            console.log(key);
            setKeys(key)
            
        }
  return (
   
    <div style={{position:"relative"}} className="paddingtop">
            {
                obj&&<div>
                  <Myhead title={obj.username} back={true}></Myhead>
                  <div className='userdetailed'>
                    <div className='backImg'>
                      {
                        obj.avatar?<img  src={obj.avatar.replace(/public/,baseURL)} alt="" />:<img src={require('../../../assets/images/xiaoxin_2.jpg')} alt="" />
                      }
                      <div className='backusername'>
                       <div style={{height:"100%",display:'flex',alignItems:"center",marginRight:"0.2rem"}}>
                        {
                              obj.avatar?<Avatar style={{width:"0.6rem",height:"0.6rem"}} src={obj.avatar.replace(/public/,baseURL)} />:<Avatar style={{width:"0.6rem",height:"0.6rem"}} src={require('../../../assets/images/xiaoxin_2.jpg')}></Avatar>
                          }
                       </div>
                       <div className='backcenter'>
                         <p>
                           <span style={{marginRight:"0.2rem"}}>{obj.username}</span>
                           <Tag icon={<DingtalkOutlined />} color={vipList.find(v=>v.value==obj.role)?.color}>
                          {vipList.find(v=>v.value==obj.role)?.label}
                          </Tag></p>
                         <p style={{color:"#333"}}>
                          tel:{obj.phone}
                         </p>
                       </div>
                      </div>
                    </div>
                    <div style={{marginTop:"2.8rem"}} className="tabcontent">
                       <Tabs
                       >
                          <Tabs.Tab title='发布的公告' key='1'>
                          {
                                filterannoList&&filterannoList.length!=0?filterannoList.map((item: any,index: any)=>(
                                    <div key={index} style={{background:"#fff",marginBottom:"0.05rem"}} 
                                    onClick={()=>gotoDetailed(item)}
                                    >
                                        <div className='userList' key={index} style={{padding:"0 0.1rem",width:"100%",height:"0.5rem"}}>
                                        <div className='touxiang' style={{height:"100%",width:"0.5rem",display:"flex",alignItems:"center"}}>
                                            {
                                                item.info.avatar?<Avatar style={{width:"0.4rem",height:"0.4rem"}} src={item.info.avatar.replace(/public/,baseURL)} />:<Avatar src={require('../../../assets/images/xiaoxin_2.jpg')}></Avatar>
                                            }
                                            </div>
                                        <div 
                                        style={{width:"100%",height:"100%"}}
                                        >
                                        <p style={{margin:0,padding:"0.05rem 0.1rem 0 0",display:"flex",justifyContent:"space-between"}}>{item.info.username} <Tag icon={<DingtalkOutlined />} color={vipList.find(v=>v.value==item.info.role)?.color}>
                                        {vipList.find(v=>v.value==item.info.role)?.label}
                                        </Tag></p>
                                        <p style={{margin:0}}>
                                        {item.phone}
                                        </p>
                                        </div>
                                        </div>
                                        <div style={{padding:"0 0.1rem",display:"flex",justifyContent:"space-between"}}>
                                            <h3 style={{fontWeight:700,fontSize:"0.18rem",width:"2rem",overflow:"hidden",height:"0.25rem",lineHeight:"0.25rem",whiteSpace:"nowrap",textOverflow:"ellipsis"}}>{item.title}</h3>
                                            <span style={{fontSize:"0.12rem"}}>{moment(item.time).format("YYYY-MM-DD HH:mm")}</span>
                                        </div>
                                    </div>
                                )):<div>
                                    <Empty
                                    style={{ padding: '0.64rem 0' }}
                                    imageStyle={{ width: 128 }}
                                    description='暂无数据'
                                    />
                                </div>
                          }
                          </Tabs.Tab>
                          <Tabs.Tab title='发布的建议' key='2'>
                          {
          filteradviseList&&filteradviseList.length!=0?<List>
            {filteradviseList.map((advise:any) => (
              
              <List.Item
              onClick={()=>gotoDetailed_advise(advise)}
                key={advise._id}
                prefix={
                  advise.info.avatar?<Avatar src={advise.info.avatar.replace(/public/,baseURL)} style={{width:"0.4rem",height:"0.4rem"}} />:<Avatar src={require('../../../assets/images/xiaoxin_2.jpg')} style={{width:"0.4rem",height:"0.4rem"}}></Avatar>
                }
                description={<div 
                style={{fontSize:13,color:"#666"}}
                dangerouslySetInnerHTML={{__html:advise.content }}>
                {/* 转义成html */}
                </div>}
              >
                <div>
                  <span style={{fontSize:14}}>{advise.info.username}</span>
                  <span style={{marginLeft:20}}>
                    
                       <Tag icon={<DingtalkOutlined />} color={vipList.find(v=>v.value==advise.info.role)?.color}>
                       {vipList.find(v=>v.value==advise.info.role)?.label}

                       </Tag>
                  </span>
                </div>
                <div>
                  <span style={{fontSize:12,color:"#999"}}>{moment(advise.time).format("YYYY-MM-DD HH:mm")}</span>
                  <span style={{fontSize:12,color:"#999",marginLeft:5}}>留下建议：</span>
                  </div>
                
              </List.Item>
            ))}
          </List>:<div>
                    <Empty
                    style={{ padding: '0.64rem 0' }}
                    imageStyle={{ width: 128 }}
                    description='暂无数据'
                    />
          </div>
        }
                          </Tabs.Tab>
                        </Tabs>
                       </div>
                    
                  </div>
                </div>
            }

    </div>
    
  )
}
export default inject('anno','advise')(observer(UserDetailed))
